<template >
  <div class="container">
    <div class="article van-hairline--bottom" v-if="loaded">
      <van-cell
        :title="article.title"
        size="large"
        :label="articleLabel"
        :border="false"
        class="article-title__cell"
      />
      <!-- 内容详情 -->
      <div class="framerich" v-html="formatRich"></div>
    </div>
  </div>
</template>
<script>
import { Tag, Col, Icon, Cell, CellGroup, Button, List, Toast } from 'vant'
import CommentList from '../../components/comment'
export default {
  components: {
    CommentList,
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [List.name]: List,
    [Toast.name]: Toast
  },
  data () {
    return {
      time: 0,
      cacheDuration: 30000,
      article: {
        liked: false
      },
      stats: {
        likes: 0
      },
      //
      loaded: false
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    },
    articleLabel () {
      let tags = []
      if (this.article) {
        tags.push(this.article.publishTime)
      }
      if (this.article.category) {
        tags.push(this.article.category.name)
      }
      if (this.stats) {
        tags.push('浏览 ' + this.stats.views)
      }
      return tags.join(' ')
    },
    formatRich () {
      let content = this.article.body
      if (content) {
        return content.replace(/\s+src=/g, ' data-src=')
      }
      return ''
    }
  },
  created () {
    this.onLoad()
  },
  mounted () {},

  methods: {
    onLoad () {
      this.axios
        .get('/share/article/' + this.id, {
          headers: { openAuth: true, FastMode: true }
        })
        .then(response => {
          this.article = response.data
          if (this.article.stats) {
            this.stats = this.article.stats
          }
          this.loaded = true
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.framerich {
  min-height: 100%;
}
</style>
